import React from "react";

import Popup from "./Popup";

import { SettingOutlined, CrownOutlined } from "@ant-design/icons";

import FontListTab from "./FontListTab";
import AboutTab from "./AboutTab";

import Update from "./Update";

function MainFrame(props) {
  const {
    header,
    fontlist,
    loading,
    onLoadMore,
    onDownloadClick,
    onFontChange,
    onSearch,
    onSwitchChange,
    bordered,
    qr: QR,
  } = props;

  const tabPageList = [
    {
      key: "settings",
      tab: {
        title: "تەڭشەك",
        icon: <SettingOutlined />,
      },
      content: (
        <FontListTab
          data={fontlist}
          loading={loading || false}
          onLoadMore={onLoadMore}
          onDownloadClick={onDownloadClick}
          onFontChange={onFontChange}
          onSearch={onSearch}
          onSwitchChange={onSwitchChange}
          bordered={bordered}
        />
      ),
    },
    {
      key: "about",
      tab: {
        title: "شىرخان",
        icon: <CrownOutlined />,
      },
      content: <AboutTab qr={QR} />,
    },
  ];

  return <Popup tablist={tabPageList} header={header} />;
}

MainFrame.Update = Update;
export default MainFrame;
